   <?xml version="1.0" encoding="UTF-8" ?>
 <Module>
   <ModulePrefs title="Hello World!">
     <Require feature="opensocial-0.8" />
   </ModulePrefs>
   <Content type="html">
     <![CDATA[
     

    <link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
    <script type="text/javascript" src="../js/ext-base-debug-w-comments.js"></script>
    <script type="text/javascript" src="../js/ext-all-debug-w-comments.js"></script>
    
     
       <div id="gadget-container">
           <div id="status-box"> </div>
           <div id="gadget-body">
           
           <ul id="friend-list">
           </ul>
               
           
           </div>
        </div>
        
     <script type="text/javascript">

     gadgets.util.registerOnLoadHandler(init);
     
     function init() {
       loadFriends();
     }
     function loadFriends() {
         var req = opensocial.newDataRequest();
    	 req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
    	 var viewerFriends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
    	 var opt_params = {};
    	 opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
    	 req.add(req.newFetchPeopleRequest(viewerFriends, opt_params), 'viewerFriends');
    	 req.send(onLoadFriends);
    	}
     function onLoadFriends(data) {
    	 var viewer = data.get('viewer').getData();
    	 var viewerFriends = data.get('viewerFriends').getData();
    	 //html = new Array();
    	 //html.push('<ul>');
    	 var friendHtml = new Array() ;
         //var friend-list = Ext.get('friend-list') ;  
    	 viewerFriends.each(function(person) {
    	   if (person.getId()) {
    		   friendHtml.push({tag:'li' , id:person.getId() , html:person.getDisplayName()}) ;
    	   }
    	  });
    	 var dh = Ext.DomHelper; 
    	 dh.append('friend-list', friendHtml);  
    	}
     
     </script>   
 
     ]]>
   </Content>
 </Module>
